<template>
  <div
    class="page-container titlebar-page"
    id="page-container"
    ref="pageContainer"
    @touchmove="onPageScrolled"
  >
    <TitleBar title></TitleBar>
    <div class="basic-info" :style="{'background-image': `url(${heroItem.pictureUrl})`}">
      <div class="info-wrapper">
        <div class="alias">{{heroItem.nickname}}</div>
        <div class="name">{{heroItem.realName}}</div>
        <div class="type">
          <img :src="heroTypeImage[heroItem.heroType - 1]" alt srcset>
          <!-- <img v-if="heroItem.type === 0" src="../../assets/images/herotype/tank.png" alt srcset>
          <img v-if="heroItem.type === 1" src="../../assets/images/herotype/warrior.png" alt srcset>
          <img v-if="heroItem.type === 2" src="../../assets/images/herotype/assassin.png" alt srcset>
          <img v-if="heroItem.type === 3" src="../../assets/images/herotype/mage.png" alt srcset>
          <img v-if="heroItem.type === 4" src="../../assets/images/herotype/archer.png" alt srcset>
          <img v-if="heroItem.type === 5" src="../../assets/images/herotype/support.png" alt srcset>-->
        </div>
        <!-- <div class="chart">
          <div class="chart-item">
            <x-circle
              :percent="percent"
              :stroke-width="strokeWidth"
              :stroke-color="chartColors[0]"
              :trail-color="trailColor"
              :trail-width="trailWidth"
            >
              <span class="chart-name" :style="{color: chartColors[0]}">生存</span>
            </x-circle>
          </div>
          <div class="chart-item">
            <x-circle
              :percent="percent"
              :stroke-width="strokeWidth"
              :stroke-color="chartColors[1]"
              :trail-color="trailColor"
              :trail-width="trailWidth"
            >
              <span class="chart-name" :style="{color: chartColors[1]}">输出</span>
            </x-circle>
          </div>
          <div class="chart-item">
            <x-circle
              :percent="percent"
              :stroke-width="strokeWidth"
              :stroke-color="chartColors[2]"
              :trail-color="trailColor"
              :trail-width="trailWidth"
            >
              <span class="chart-name" :style="{color: chartColors[2]}">技能</span>
            </x-circle>
          </div>
          <div class="chart-item">
            <x-circle
              :percent="percent"
              :stroke-width="strokeWidth"
              :stroke-color="chartColors[3]"
              :trail-color="trailColor"
              :trail-width="trailWidth"
            >
              <span class="chart-name" :style="{color: chartColors[3]}">难度</span>
            </x-circle>
          </div>
        </div>-->
        <!-- <div class="value">
          <div class="money">
            <img src="../../assets/images/coin.png" alt="" srcset="">
            <span>{{heroItem.money}}</span>
          </div>
          <div class="rune">
            <star-icon :size="16"></star-icon>
            <span>588</span>
          </div>
        </div>-->
      </div>
      <div class="divider"></div>
    </div>
    <!-- <div class="tabbar-wrapper" ref="tabbar" :class="{sticky: isSticky}" :style="tabbarStyle"></div>
    <div class="tabbar-placeholder" :class="{sticky: isSticky}" ref="tabbarPlaceholder" ></div>-->

    <div class="skills-wrapper">
      <div class="title">
        <span>技能介绍</span>
      </div>
      <div class="skill-list">
        <ul>
          <li
            v-for="(item, i) of heroItem.skillList"
            :key="i"
            @click="onSelectSkill(item, i)"
            :class="{'selected': skillSelectedIndex === i}"
          >
            <div class="icon">
              <img :src="item.skillUrl" alt>
            </div>
            <div class="name">
              <span>{{item.skillName}}</span>
            </div>
            <div class="type">
              <span>{{item.skillLevel | SkillType}}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="intro">
        <p>{{skillSelected.remark}}</p>
      </div>
    </div>

    <div class="equip-wrapper">
      <div class="title">
        <div class="left">
          <span>出装搭配</span>
        </div>
        <div class="right">
          <!-- 爆发收割 -->
        </div>
      </div>
      <div class="equip-list">
        <ul>
          <li v-for="(item, i) of heroItem.equipmentList" :key="i" @click="showEquipRelation(item)">
            <!-- <img :src="item.equUrl" alt="" class="icon"> -->
            <x-img
              :default-src="require('../../assets/images/default-card.png')"
              :src="item.equUrl"
              class="icon"
              alt
            />
          </li>
        </ul>
      </div>
    </div>

    <div class="ins-wrapper">
      <div class="title">铭文搭配</div>
      <ul class="ins-list">
        <li v-for="(item,i) of heroItem.insList" :key="i" @click="showInsDetail(item)">
          <div class="list-item">
            <div class="icon">
              <img :src="item.insUrl" alt>
            </div>
            <div class="level-name">5级: {{item.insName}}</div>
            <div class="effects"></div>
          </div>
        </li>
      </ul>
    </div>

    <div class="dialog-wrapper" v-if="dialog">
      <div class="dialog">

        <img v-if="dialogType === 1" :src="equSelected.relationUrl" alt srcset>
        <img v-else :src="insSelected.relationUrl" alt srcset>
        <div class="actions">
          <close-circle-outline-icon style="color: #e84835;" @click="dialog =  false"></close-circle-outline-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TitleBar from "../../components/TitleBar";
import { XImg } from "vux";
export default {
  data() {
    return {
      dialog: false,
      titleIconSize: 20,
      titleIconColor: "#6f6f6f",
      isSticky: false,
      heroTypeImage: [
        "tank",
        "warrior",
        "assassin",
        "mage",
        "archer",
        "support"
      ].map(item => require(`../../assets/images/herotype/${item}.png`)),
      disabled:
        typeof navigator !== "undefined" &&
        /iphone/i.test(navigator.userAgent) &&
        /ucbrowser/i.test(navigator.userAgent),
      headUrl:
        "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=247243623,4212565702&fm=27&gp=0.jpg",
      skillSelectedIndex: 0,
      skillSelected: {},
      chartColors: ["#04BE02", "#F44336", "#24a4d6", "#3F51B5"],
      trailColor: "#D2D2D2",
      percent: 80,
      strokeWidth: 5,
      trailWidth: 5,
      tabbarStyle: {
        backgroundColor: "#343434"
      },
      offsetTop: 0,
      heroItem: {
        skillList: []
      },
      heroSelectedIndex: 0,
      insSelected: {},
      equSelected: {},
      dialogType: 0
    };
  },
  mounted() {
    this.heroItem = this.$route.params.heroItem;
    let tabbar = this.$refs.tabbar;
    let app = document.querySelector("#app");
    // this.offsetTop = tabbar.offsetTop;
    // console.log(this.$route)
    console.log(this.heroItem);

    // app.addEventListener("scroll", this.onScrollHandler, this);
    this.$nextTick(() => {
      this.skillSelected = this.heroItem.skillList[0];
      // this.$refs.sticky.bindSticky();
    });
  },
  beforeDestroy() {
    // let app = document.querySelector("#app");
    // app.removeEventListener("scroll", this.onScrollHandler);
  },
  methods: {
    onScrollHandler(ev) {
      let app = ev.target;
      let tabbar = this.$refs.tabbar;
      if (tabbar) {
        this.isSticky = app.scrollTop >= this.offsetTop;
        if (this.isSticky) {
          tabbar.classList.add("sticky");
        } else {
          tabbar.classList.remove("sticky");
        }
      }
    },
    onPageScrolled(ev) {
      let tb = this.$refs.tabbar;
      let pc = this.$refs.pageContainer;

      // let {clientX,clientY,pageX,pageY,screenX,screenY} = ev.touches[0]
      // console.log(clientX,clientY,pageX,pageY,screenX,screenY);
    },
    onSelectSkill(item, i) {
      this.skillSelectedIndex = i;
      this.skillSelected = item;
    },
    showInsDetail(item) {
      console.log(item);
      // this.insSelected = item;
    },
    showEquipRelation(item) {
      this.dialogType = 1;
      this.equSelected = item;
      this.dialog = true;
    }
  },
  watch: {
    "$refs.tabbar": {
      handler: function(newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      deep: true
    }
  },
  components: {
    TitleBar,
    XImg
  }
};
</script>

<!-- v-html 中的内容不含在scope中  不能加scoped-->
<style lang="less">
.page-container {
  width: 100%;
  // height: 100%;
  .basic-info {
    width: 100%;
    height: 8rem;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .info-wrapper {
      flex: 4;
      display: flex;
      flex-direction: column;
      background-color: rgba(0, 0, 0, 0.4);
      justify-content: flex-end;
      padding-bottom: 1rem;
      padding-left: 0.6rem;
      height: 100%;
      .alias {
        font-size: 0.7rem;
        color: #c0c0c0;
        // text-align: center;
      }
      .name {
        font-size: 1.3rem;
        // border-bottom: 1px dashed #999;
        color: white;
        // text-align: center;
        margin-bottom: 0.5rem;
      }
      .type {
        font-size: 0.7rem;
        color: #f0f0f0;
        // text-align: center;
        img {
          width: 3.4rem;
          height: 1.7rem;
        }
      }
      .chart {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 2rem;
        svg {
          transform: rotateZ(-90deg);
        }
        .chart-item {
          flex: 1;
          height: 100%;
          padding: 6px;
          .chart-name {
            font-size: 0.6rem;
            position: relative;
            top: -3px;
          }
        }
      }
      .value {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 4px;
        .money,
        .rune {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 11px;
          img {
            width: 1rem;
            height: 1rem;
          }
        }
      }
    }
    .divider {
      flex: 8;
    }
  }

  .tabbar-wrapper {
    height: 3rem;
    // position: sticky;
    // top: 0;
    z-index: 99;
    width: 100%;
    // background-color: #111;
    &.sticky {
      position: fixed;
      top: 0;
    }
  }

  .tabbar-placeholder {
    height: 3rem;
    background: transparent;
    position: fixed;
    top: 0;
    z-index: -1;
    &.sticky {
      position: relative;
      top: none;
      z-index: 0;
    }
  }

  .skills-wrapper {
    .title {
      margin: 8px 0;
      font-size: 1.02rem;
      text-align: center;
    }
    .skill-list {
      height: 4rem;
      width: 100%;
      margin-bottom: 2rem;
      ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        li {
          flex: 1;
          display: flex;
          align-items: center;
          flex-direction: column;
          .icon {
            flex: 3;
            img {
              width: 2.6rem;
              height: 2.6rem;
              border-radius: 50%;
              filter: grayscale(1);
            }
          }
          .name {
            flex: 1;
            font-size: 0.7rem;
            color: #666;
          }
          .type {
            flex: 1;
            font-size: 0.7rem;
            color: #24a4d6;
            position: relative;
          }

          &.selected {
            .icon img {
              filter: grayscale(0);
            }
            .name {
              color: #111;
            }
            // .type:after {
            //   content: "";
            //   display: block;
            //   border-width: 8px 8px 8px 8px;
            //   border-style: solid;
            //   border-color: transparent transparent rgba(0, 0, 0, 0.2)
            //     transparent;
            //   position: absolute;
            //   left: 0;
            //   top: 13px;
            // }
          }
        }
      }
    }
    .intro {
      padding: 6px 9px;
      p {
        background-color: rgba(0, 0, 0, 0.12);
        font-size: 0.82rem;
        padding: 6px;
      }
    }
  }

  .equip-wrapper {
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
    .title {
      text-align: center;
      font-size: 1.08rem;
      margin-top: 0.8rem;
      margin-bottom: 0.8rem;
      .left {
        display: flex;
        justify-content: center;
      }
      .right {
        font-size: 0.7rem;
      }
    }
    .equip-list {
      margin-top: 1rem;
      ul {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        li {
          display: flex;
          flex: 1;
          justify-content: center;
          align-items: center;
          img {
            width: 2.6rem;
            height: 2.6rem;
          }
        }
      }
    }
  }

  .ins-wrapper {
    padding-bottom: 1.2rem;
    .title {
      text-align: center;
      font-size: 1.08rem;
      margin-top: 0.8rem;
      margin-bottom: 0.8rem;
    }
    .ins-list {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      li {
        flex-basis: 33%;

        .list-item {
          text-align: center;
          .level-name {
            font-size: 0.8rem;
          }
          img {
            width: 2.6rem;
            height: 2.6rem;
          }
        }
      }
    }
  }
  .dialog img {
    width: 16rem;
  }
}
</style>
